<template>
    <div class="qradio">
        <div class="title">
            <span style="color:red;">*</span>
            <span>{{serialNum}}</span>
            {{data.question}}
        </div>
        <div class="tips" v-if="data.tips && data.tips.length > 0">{{data.tips}}</div>


        <div class="tips" v-if=" type == 'radioButton' ">
             <slot name="tips2"></slot>
        </div>


        <el-radio-group v-if="type != 'radioButton'" v-model="model" @change="selectChange">
            <div class="r-label" v-for="(item ,index) in data.answerList" :key="index" @click="labelClick(item)">
                <el-radio :label="item">{{item}} <br></el-radio>
            </div>
            <br>
            <!-- <el-radio v-for="(item ,index) in data.answerList" :key="index" :label="item">{{item}} <br></el-radio> -->

        </el-radio-group>

        <el-radio-group v-if="type == 'radioButton'" v-model="model" @change="selectChange" class="r-gropup">
            <div class="r-label2" v-for="(item ,index) in data.answerList" :key="index" @click="labelClick(item)">
                <el-radio-button :label="item">{{item}} </el-radio-button>
            </div>
            <br>
        </el-radio-group>

    </div>
</template>

<script>
import MODEL from '@/mixins/model';

export default {
    mixins: [MODEL],
    name: '',
    props: {
        serialNum: {
            type: Number,
            default: null,
        },
        data: {
            type: Object,
            default: () => ({}),
        },
        type: {
            type: String,
            default: '',
        },
    },
    data() {
        return {
            radio: null,
        };
    },
    mounted() {},
    methods: {
        selectChange: function (item) {
            console.log(item);
            console.log(11, this.data.answer);
        },
        labelClick(item) {
            this.model = item;
        },
    },
};
</script>

<style lang="scss" scoped>
.qradio {
    font-size: 14px;
    .title {
        font-size: 18px;
        margin: 10px 0;
    }
    .tips {
        color: #979696;
    }

    ::v-deep .el-radio-group {
        display: inline-block;
        line-height: 1;
        vertical-align: middle;
        font-size: 0;
        width: 100%;
        margin: 10px 0;
    }

    .r-label {
        padding: 8px 0;
        width: 100%;
        cursor: pointer;
        &:hover {
            background-color: #e9eefb;
        }
    }

    .r-gropup {
        display: flex;
        margin-bottom: 20px;
        
        .r-label2 {
            margin-right: 15px;
        }
    }
}
</style>
